<template>
	<view class="content">
		<view class="header">
			<view class="title">BST/USDT</view>
			<view class="right">
				<image 
				v-show="!chartsShow" 
				@click="chartsClick" 
				src="../../static/icon/kxian.png" 
				mode=""></image>
				<image 
				v-show="chartsShow" 
				@click="chartsClick" 
				src="../../static/icon/kxactive.png" 
				mode=""></image>
				
				<image 
				v-show="chartsShow" 
				@click="chartsShow=false" 
				src="../../static/icon/sd.png" 
				mode=""></image>
				<image 
				v-show="!chartsShow" 
				@click="chartsShow=false" 
				src="../../static/icon/sdactive.png" 
				mode=""></image>
			</view>
		</view>
		<view class="table_title">
			<text>1.00</text>
			<text style="margin:0 10rpx;">≈</text>
			<text>{{bsttousdt || 0}}CNY</text>
		</view>
		<view class="chartsCont" v-show="chartsShow">
			<view class="qiun-charts">
				<canvas 
				canvas-id="canvasCandle" 
				id="canvasCandle" 
				class="charts" 
				disable-scroll=true 
				@touchstart="touchCandle" 
				@touchmove="moveCandle" 
				@touchend="touchEndCandle"></canvas>
			</view>
		</view>
		<view class="table" v-show="!chartsShow">
			<view class="title">
				<view class="lf">
					<view class="item">买</view>
					<view class="number">数量</view>
					<view class="price">价格</view>
				</view>
				<view class="">
					<view class="sellprice">价格</view>
					<view class="number">数量</view>
					<view class="item">卖</view>
				</view>
			</view>
			<view class="tabCont">
				<view>
					<view class="list" v-for="(item,index) in payList" :key="index">
						<view class="lf" @click="payorderClick(item.price)">
							<view class="item">{{index+1}}</view>
							<view class="number">{{item.number}}</view>
							<view class="price">{{item.price}}</view>
						</view>
					</view>
				</view>
				<view>
					<view class="list" v-for="(item,index) in paySellList" :key="index">
						<view class="lr" @click="cutorderClick(item.price)">
							<view class="price">{{item.price}}</view>
							<view class="number">{{item.number}}</view>
							<view class="item">{{index+1}}</view>	
						</view>
					</view>
				</view>
			</view>
			
		</view>
		<view class="entrust">
			<view class="title">限价委托</view>
			<view class="cont">
				<view class="lf">
					<NumberBox 
					@change='Price' 
					:placeholder='"买入价格"'  
					:price="price" 
					:step="step"></NumberBox>
					<view class="price">
						≈{{(price*usdttocny).toFixed(2)}}CNY
					</view>
				</view>
				<view class="lr">
					<NumberBox 
					@change='sellPrice' 
					:placeholder='"卖出价格"' 
					:price="sellprice" 
					:step="step"></NumberBox>
					<view class="price">
						≈{{(sellprice*usdttocny).toFixed(2)}}CNY
					</view>
				</view>
				
			</view>
		</view>
		<view class="bts_cont">
			<view class="lf">
				<view class="top">
					<view class="num">
						<u-input 
						:custom-style="{color:'#fff'}" 
						v-model="number" 
						type="number" 
						placeholder="买入数量" />
						<text class="title">BST</text>
					</view>
				</view>
				<view class="center">
					<view :class='{payactive:payactive==0.25}' @click="payNum(0.25)">25%</view>
					<view :class='{payactive:payactive==0.5}' @click="payNum(0.5)">50%</view>
					<view :class='{payactive:payactive==0.75}' @click="payNum(0.75)">75%</view>
					<view :class='{payactive:payactive==1}' @click="payNum(1)">100%</view>
				</view>
				<view class="btm">
					<view class="item">
						<text class="title">可用</text>
						<text>{{usdt}}USDT</text>
					</view>
					<view class="item">
						<text class="title">交易额</text>
						<text>{{(price*number).toFixed(4)}}USDT</text>
					</view>
				</view>
				<u-button 
				:loading='loading' 
				:hair-line="btnBorder" 
				@click="pay" 
				class="btn buy">买入BST</u-button>
			</view>
			<view class="lr">
				<view class="top">
					<view class="num">
						<u-input 
						:custom-style="{color:'#fff'}" 
						v-model="sellnumber" 
						type="number" 
						placeholder="卖出数量" />
						<text class="title">BST</text>
					</view>
				</view>
				<view class="center">
					<view :class='{cutative:cutative==0.25}' @click="cutNum(0.25)">25%</view>
					<view :class='{cutative:cutative==0.5}' @click="cutNum(0.50)">50%</view>
					<view :class='{cutative:cutative==0.75}' @click="cutNum(0.75)">75%</view>
					<view :class='{cutative:cutative==1}' @click="cutNum(1)">100%</view>
				</view>
				<view class="btm">
					<view class="item">
						<text class="title">可用</text>
						<text>{{bst}}BST</text>
					</view>
					<view class="item">
						<text class="title">交易额</text>
						<text>{{(sellprice*sellnumber).toFixed(4)}}USDT</text>
					</view>
				</view>
				<u-button :loading='loading' @click="cut" :hair-line="btnBorder" class="btn cut">卖出BST</u-button>
			</view>
		</view>
		<view class="entrust_order">
			<view class="title">
				<text>当前委托</text>
				<text @click="go">全部</text>
			</view>
			<view class="order_list">
				<view class="item" v-for="(item,index) in order_list" :key="index">
					<view class="top">
						<view class="lf">
							<text v-if="item.paytype ==1">买入</text>
							<text v-else style="color:#f45a68">卖出</text>
							<text>BST/USDT</text>
						</view>
						<view class="lr">
							{{item.status == 1?'委托中':item.status == 4?'已完成':'已撤销'}}
						</view>
					</view>
					<view class="order_title">
						<text>时间</text>
						<text>委托价(USDT)</text>
						<text>委托量(BST)</text>
					</view>
					<view class="order_cont">
						<text>{{item.update_time}}</text>
						<text>{{item.price}}</text>
						<text>{{item.number}}</text>
					</view>
				</view>
			</view>
		</view>
		<Nav :current='navActive'></Nav>
		<!--对话框-->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import Nav from '../../component/Nav.vue'
	import NumberBox from '../../component/NumberBox.vue'
	import uCharts from '../../js_sdk/u-charts/u-charts/u-charts.js';
	var _self;
	var canvaCandle=null;
	export default {
		components:{
			NumberBox,
			Nav
		},
		data(){
			return{
				navActive:2,
				chartsShow:false,//切换图表
				cWidth:'',
				cHeight:'',
				pixelRatio:1,
				btnBorder:false,
				loading:false,
				price:0.15,//买入
				number:null,//买入数量
				sellprice:null,//卖出
				sellnumber:null,//卖出数量
				step:0.01,//步长
				paySellList:[],//卖出列表
				payList:[],//买入列表
				usdt:0,//可用usdt
				usdtjye:0,//usdt交易额
				bst:0,//可用bst
				bstjyg:0,//bstjyg交易额
				bsttousdt:0,//汇率
				order_list:[],//订单列表
				usdttocny:0,//比例
				payactive:0,
				cutative:0,
			}
		},
		onReady() {
			uni.hideTabBar()
		},
		onLoad() {
			this.getpay()
			this.getpaysell()
			this.getUserInfo()
			this.orderList()
		},
		onPullDownRefresh(){
			this.getpay()
			this.getpaysell()
			this.getUserInfo()
			this.orderList()
		},
		methods:{
			//
			payorderClick(e){
				//console.log('点击',e)
				this.sellprice = Number(e)
			},
			cutorderClick(e){
				//console.log('点击',e)
				this.price = Number(e)
			},
			//点击
			payNum(e){
				this.payactive = e
				if(this.price<=0){
					this.number = 0
				}else{
					this.number = (this.usdt/this.price*e).toFixed(4)
				}
				
			},
			cutNum(e){
				this.cutative = e
				if(this.sellprice<=0){
					this.sellnumber = 0
				}else{
					this.sellnumber = (this.bst/this.sellprice*e).toFixed(4)
				}
			},
			//获取用户信息
			getUserInfo(){
				this.$http({
					url:this.$api.user_getinfo,
					method:'POST',
					success:res=>{
						
						this.usdt = res.data.usdt
						this.bst = res.data.bst
						this.usdtjye = res.data.usdtjye
						this.usdtjye = res.data.usdtjye
						this.bsttousdt = res.data.bsttousdt
						this.usdttocny = res.data.usdttocny
					},
					complete:e=>{
						uni.stopPullDownRefresh();
					}
				})
			},
			//点击买入
			pay(){
				if(this.price<=0 && !this.price){
					this.$refs.uToast.show({
						title: '买入价格不正确',
						type: 'error'
					})
					return
				}
				if(!this.number){
					this.$refs.uToast.show({
						title: '买入数量不正确',
						type: 'error'
					})
					return
				}
				this.submit({
					price:this.price,
					number:this.number,
					paytype:1
				})
			},
			//点击卖出
			cut(){
				if(this.sellprice<=0 && !this.sellprice){
					this.$refs.uToast.show({
						title: '卖出价格不正确',
						type: 'error'
					})
					return
				}
				if(!this.sellnumber){
					this.$refs.uToast.show({
						title: '卖出数量不正确',
						type: 'error'
					})
					return
				}
				this.submit({
					price:this.sellprice,
					number:this.sellnumber,
					paytype:2
				})
			},
			submit(e){
				this.loading = true
				this.$http({
					url:this.$api.paysell_paysell,
					method:'POST',
					hideLoading:true,
					data:e,
					success:res=>{
						this.getpay()
						this.getpaysell()
						this.getUserInfo()
						this.orderList()
						this.$refs.uToast.show({
							title: res.msg,
							type: 'success'
						})
					},
					complete:e=>{
						this.loading = false
						uni.stopPullDownRefresh();
					}
				})
			},
			//交易记录表
			//卖
			getpaysell(){
				this.orderList(2)
			},
			//买
			getpay(){
				this.orderList(1)
			},
			orderList(e=''){
				let gettype = 'getall'
				if(!e){
					gettype = ''
				}
				this.$http({
					url:this.$api.paysell_getAll,
					method:'POST',
					hideLoading:true,
					data:{
						page:1,
						list_rows:5,
						paytype:e,
						status:1,
						gettype:gettype,
						sorttype:'price'
					},
					success:res=>{
						//买入
						if(e==1){
							this.payList = res.data.data
							if(this.payList.length<5){
								let n = 5 - this.payList.length
								for (let i = 0; i < n; i++) {
									this.payList.push({id:i+'i',number:0,price:0})
								}
							}
						}
						//卖出
						if(e==2){
							this.paySellList = res.data.data
							if(this.paySellList.length<5){
								let n = 5 - this.paySellList.length
								for (let i = 0; i < n; i++) {
									this.paySellList.push({id:i+'i',number:0,price:0})
								}
							}
						}
						if(!e){
							this.order_list = res.data.data
						}
					},
					complete:e=>{
						uni.stopPullDownRefresh();
					}
				})
			},
			//查看全部委托订单
			go(){
				uni.navigateTo({
				    url: './Order'
				});
			},
			//点击查看K线
			chartsClick(){
				if(!this.chartsShow){
					this.chartsShow=true
					_self = this;
					this.cWidth=uni.upx2px(700);
					this.cHeight=uni.upx2px(500);
					this.getServerData();
				}
			},
			//
			Price(data){
				//console.log(data)
				this.price=Number(data.Price)
				this.number = 0
			},
			//
			sellPrice(data){
				//console.log(data)
				this.sellprice=Number(data.Price)
				this.sellnumber = 0
			},
			//获取图表数据
			getServerData(){
				this.$http({
					url:this.$api.paysell_klist,
					method:'POST',
					hideLoading:true,
					success:res=>{
						let Candle={categories:[],series:[]};
						Candle.categories = res.data.categories
						Candle.series.push(res.data.series)
						this.showCandle("canvasCandle",Candle);
					},
					fail:err=>{
						console.log('图表数据获取失败------',err)
					}
				})
			},
			//生成图表
			showCandle(canvasId,chartData){
				canvaCandle=new uCharts({
					$this:this,
					canvasId: canvasId,
					type: 'candle',
					fontSize:11,
					legend: {
						show: false,//是否隐藏图列
						fontColor:'#6279f9',//图列颜色
					},
					background:'transparent',
					pixelRatio:1,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					enableScroll: true,
					xAxis: {
						disabled:true,
						disableGrid:true,
						itemCount:20,
						scrollShow:true,
						scrollAlign:'right',
					},
					yAxis: {
						gridColor:'transparent',
						gridType:'dash',
						splitNumber:5,
						format:(val)=>{return val.toFixed(2)}
					},
					width: this.cWidth,
					height: this.cHeight,
					dataLabel: false,
					dataPointShape: true,
					extra: {
						candle:{
							color:{
								upLine:'#f04864',
								upFill:'#f04864',
								downLine:'#2fc25b',
								downFill:'#2fc25b'
							},
							average:{
								show:true,
								name:['MA5','MA10','MA30'],
								day:[5,10,30],
								color:['#1890ff', '#2fc25b', '#facc14']
							}
						},
						tooltip:{
							bgColor:'#000000',
							bgOpacity:0.7,
							gridType:'dash',
							dashLength:5,
							gridColor:'#1890ff',
							fontColor:'#FFFFFF',
							horizentalLine:true,
							xAxisLabel:true,
							yAxisLabel:true,
							labelBgColor:'#DFE8FF',
							labelBgOpacity:0.95,
							labelAlign:'left',
							labelFontColor:'#666666'
						}
					},
				});
				
			},
			//触摸滑动图标事件
			touchCandle(e){
				canvaCandle.scrollStart(e);
			},
			moveCandle(e) {
				canvaCandle.scroll(e);
			},
			touchEndCandle(e) {
				canvaCandle.scrollEnd(e);
				//下面是toolTip事件，如果滚动后不需要显示，可不填写
				canvaCandle.showToolTip(e, {
					format: function (item, category) {
						return category + ' ' + item.name + ':' + item.data 
					}
				});
			},
			
		}
		
	}
</script>

<style lang="scss" scoped>
	.content{
		.header{
			margin: 100rpx 24rpx 10rpx 24rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.title{
				font-size: 22px;
				color: #FFFFFF;
			}
			.right{
				image{
					max-width: 42rpx;
					max-height: 39rpx;
				}
				image:nth-child(1){
					margin-right: 24rpx;
				}
				image:nth-child(2){
					margin-right: 24rpx;
				}
			}
		}
		.table_title{
			font-size: 18px;
			color: #FFFFFF;
			margin-left: 40rpx;
			text{
				font-size: 14px;
				color: $uni-font-color;
			}
		}
		.table{
			margin-top: 10rpx;
			padding: 20rpx 10rpx;
			margin: 0 24rpx;
			border-radius: 10rpx;
			background-color: $border-bottom-color;
			.title{
				display: flex;
				justify-content:space-between;
				color:$uni-font-color;
				>view{
					width: 49%;
					display: flex;
					justify-content:space-between;
					>view{
						padding: 0 10rpx;
					}
					.item{
						width: 20%;
						word-break:break-all;
						text-align: center;
					}
					.number{
						width: 40%;
						word-break:break-all;
						text-align: center;
					}
					.price{
						width: 40%;
						text-align: right;
						word-break:break-all;
					}
					.sellprice{
						width: 40%;
						word-break:break-all;
					}
				}
			}
			.tabCont{
				color:#5e69ff;
				display: flex;
				justify-content: space-between;
				>view{
					width: 49%;
					padding: 0 10rpx;
					.list{
						border-bottom: 1px solid $border-bottom-color;
						padding: 10rpx 0;
						font-size: 12px;
						>view{
							display: flex;
							justify-content:space-between;
						}
					}
					.lr{
						.price{
							text-align: left;
							color: #f45a68;
						}
					}
					.item{
						width: 20%;
						word-break:break-all;
						text-align: center;
					}
					.number{
						width: 40%;
						word-break:break-all;
						text-align: center;
						color: #FFFFFF;
					}
					.price{
						width: 40%;
						text-align: right;
						word-break:break-all;
						color:#0cdda9
					}
					.sellprice{
						width: 40%;
						word-break:break-all;
						color:#f45a68
					}
				}
			}
			.title{
				border-bottom: 2px solid $border-bottom-color;
			}
		}
		
		.entrust{
			margin: 20rpx 24rpx;
			.title{
				color: #FFFFFF;
				font-size: 16px;
			}
			.cont{
				display: flex;
				justify-content: space-between;
				margin-top: 32rpx;
				>view{
					width: 48%;
				}
				.price{
					margin-top: 22rpx;
					font-size: 14px;
					color:$uni-font-color;
				}
				
			}
		}
		.bts_cont{
			display: flex;
			justify-content: space-between;
			margin: 0 24rpx;
			>view{
				width: 48%;
				
			}
			.btn{
				font-weight: 600;
				background-color: #0cdda9;
				border: 0;
				color: #FFFFFF;
				margin-top: 40rpx;
			}
			.cut{
				background-color: #f45a68;
			}
			.top{
				color: #FFFFFF;
				border: 1px solid $border-bottom-color;
				border-radius: 15rpx 15rpx 0 0;
				
				.title{
					color: $uni-font-color;
				}
				.num{
					padding:0 10rpx;
					margin: 20rpx 10rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					border: 1px solid $border-bottom-color;
				}
			}
			.center{
				display: flex;
				justify-content: space-between;
				border-bottom: 1px solid $border-bottom-color;
				border-left: 1px solid $border-bottom-color;
				border-right: 1px solid $border-bottom-color;
				font-size: 12px;
				color: #5e69ff;
				>view{
					min-width: 24%;
					border-left: 1px solid $border-bottom-color;
					padding: 20rpx 0;
					text-align: center;
				}
				view:first-child{
					border-left: 0;
				}
				.payactive,.cutative{
					color: #FFFFFF;
				}
			}
			.btm{
				margin-top: 30rpx;
				.item{
					display: flex;
					justify-content: space-between;
					color: #FFFFFF;
					margin-bottom: 18rpx;
					.title{
						color: $uni-font-color;
					}
				}
			}
		}
		.entrust_order{
			margin-top: 40rpx;
			border-top: 8rpx solid $border-bottom-color;
			.title{
				padding: 38rpx 38rpx 28rpx 38rpx;
				color: #FFFFFF;
				font-weight: 600;
				font-size: 18px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1px solid$border-bottom-color;
				text:last-child{
					width: 96rpx;
					font-size: 16px;
					color: #5e69ff;
					display: block;
					background-color:$border-bottom-color;
					padding: 5rpx 0;
					text-align: center;
					border-radius: 10rpx;
				}
			}
			.order_list{
				padding: 38rpx 38rpx 20rpx 38rpx;
				.item{
					>view{
						display: flex;
						justify-content: space-between;
					}
					.top{
						text:first-child{
							font-size: 16px;
							color: #0cdda9;
						}
						text{
							font-size: 12px;
							color: #6279f9;
						}
						.lr{
							color: #FFFFFF;
						}
					}
					.order_title{
						padding: 18rpx 0;
						color: #6279f9;
						font-size: 12px;
						>text{
							width: 33.33%;
							text-align: center;
						}
						>text:nth-child(1){
							text-align: left;
						}
						>text:nth-child(3){
							text-align: right;
						}
					}
					.order_cont{
						color: #FFFFFF;
						font-size: 12px;
						>text{
							width: 33.33%;
							text-align: center;
						}
						>text:nth-child(1){
							text-align: left;
						}
						>text:nth-child(3){
							text-align: right;
						}
					}
				}
			}
		}
		/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
		.chartsCont{
			width: 100%;
			height: 500upx;
			.qiun-charts {
				width: 700upx;
				height: 500upx;
				background-color: transparent;
				margin: 0 auto;
			}
			.charts {
				width: 700upx;
				height: 500upx;
				margin: 0 auto;
				background-color: transparent;
			}
		}
	}
</style>